<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        #box {
            width: 850px;
            height: 1050px;
            border: 1px solid #b5b1b1;
            box-sizing: border-box;
            margin: 0 auto;
        }

        form {
            overflow: hidden;
            width: 800px;
            height: 1000px;
            /* border: 1px solid #000; */
            box-sizing: border-box;
            margin: 25px auto;
        }

        #box legend {
            padding: 1px 4px 1px 4px;
            border: 1px solid #b5b1b1;
            margin-left: 15px;
        }

        #box fieldset {
            border: 1px solid #b5b1b1;
            /* width: 500px; */
            height: 200px;
        }

        #box>form div {
            width: 250px;
            height: 30px;
            /* border: 1px solid #d67c7c; */
            box-sizing: border-box;
            margin: 0 auto;
            text-align: right;
        }
        button{
            display: block;
            width: 50px;
            height: 30px;
            background-color: #ee7474;
            color: #3e3e3e;
            border: none;
            margin: 0 auto;
            border: 1px  solid #757575;
            box-sizing: border-box;
        }
        .bt2{
            display: inline-block;
            margin-right: 50px;
            box-sizing: border-box;
        }
        .pp{
            width: 750px;
            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div id="box">
        <form action="#">
            <h4>已注册用户登录</h4>
            <fieldset>
                <legend>
                    用户登录
                </legend>
                <div><span>用户名</span><input type="text" placeholder=""></div>
                    <div><span>密码</span><input type="password" placeholder=""></div>
                    <div> <button>登录</button></div>
                        <p style="text-align: center;"><a href="#">你忘了密码?</a>&emsp;&emsp;&emsp;<input type="checkbox"><a>记住密码</a></p>
            </fieldset>
            <h3>未注册创建用户</h3>
            <fieldset style="height: 300px;">
                <legend>
                    用户注册
                </legend>
                <p class="pp"><span>您的电子邮箱不会被公布出去，但是必须填写。</span>在您注册之前请认真阅读服务条款</p>
                <div>
                    <span>用户名</span><input type="text" placeholder="">
                </div>
                <div><span>密码</span><input type="password" placeholder=""></div>
                <div><span>确认密码</span><input type="password" placeholder=""></div>
                <div><span>邮箱</span><input type="text" placeholder=""></div>
                <div>同意服务条款<input type="checkbox"><a href=""#>先看看条款?</a></div>
                <div><button class="bt2">提交</button><button class="bt2">重置</button></div>
                <p class="pp">*在你提交之气那我认为你已经同意我们的服务了.</p>
                <p class="pp">*这些条款可能在未经同意的时候修改</p>
        </form>
    </div>
</body>

</html>